import React, {Component} from 'react';

class Field extends Component{
    state={
        value:'',
    }

    clean(){
     this.setState({
         value:'',
     })
    }

    render() {
        return (
            <div style={{background:'yellow'}}>
                <label>{this.props.label}</label>
                <input type={this.props.type} onChange={(evt)=>{
                    this.setState({
                        value:evt.target.value
                    })
                }} value={this.state.value}/>
            </div>
        );
    }
}

class App extends Component {
    textRef=React.createRef()
    passwordRef=React.createRef()
    render() {
        return (
            <div>
                <h1>登录页面</h1>
                <Field label="用户名：" type="text" ref={this.textRef}></Field>

                <Field label="密码：" type="password" ref={this.passwordRef}></Field>

                <Field label="身份证：" type="number"></Field>

                <button onClick={()=>{
                    console.log(this.textRef.current)
                }}>登录</button>
                <button onClick={()=>{
                    this.textRef.current.clean()
                }}>取消</button>
            </div>
        );
    }
}

export default App;
